import React, { Fragment } from "react";
import { Chart, Tooltip, Geom, Legend, Axis } from "bizcharts";
import DataSet from "@antv/data-set";
import moment from "moment";
import autoHeight from "../autoHeight";

@autoHeight()
export default class TimelineChart extends React.Component {
  getG2Instance = chart => {
    this.chart = chart;
  };

  render() {
    if (this.chart) {
      this.chart.forceFit();
    }
    const {
      title,
      height = 400,
      padding = [30, 20, 40, 40],
      titleMap = {
        y1: "y1",
        y2: "y2"
      },
      borderWidth = 2,
      data = [
        {
          x: 0,
          y1: 0,
          y2: 0
        }
      ]
    } = this.props;
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: "map",
      callback(row) {
        const newRow = { ...row };
        newRow[titleMap.y1] = row.y1;
        newRow[titleMap.y2] = row.y2;
        return newRow;
      }
    }).transform({
      type: "fold",
      fields: [titleMap.y1, titleMap.y2],
      // 展开字段集
      key: "key",
      // key字段
      value: "value" // value字段
    });
    let scale = {};
    if (data.length) {
      scale = {
        x: {
          type: "cat",
          range: [0.04, 0.96]
          //
        },
        value: {
          type: "linear",
          min: 0,
          max: 100
        }
      };
    } else {
      scale = {
        x: {
          type: "linear",
          tickInterval: 1,
          tickCount: 14,
          min: 0,
          max: 14,
          formatter: val =>
            moment()
              .add(val - 15, "days")
              .format("MM.DD")
        },
        value: {
          max: 100,
          min: 0,
          tickInterval: 15
        }
      };
    }
    return (
      <Fragment>
        {title && (
          <h4>
            <strong>{title}</strong>
          </h4>
        )}
        <Chart
          height={height}
          padding={padding}
          data={dv}
          scale={scale}
          forceFit
          onGetG2Instance={this.getG2Instance}
        >
          <Axis
            name="x"
            label={{ formatter: val => moment(val).format("MM.DD") }}
          />
          <Axis
            name="value"
            label={{
              formatter: val => `${val}%`
            }}
          />
          {data.length > 0 && (
            <Tooltip
              useHtml={true}
              itemTpl={
                '<li data-index={index} class="g2-tooltip-marker" ><span style="background-color:{color};width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{name}：{value}%</li>'
              }
              g2-tooltip={{
                backgroundColor: "rgba(0,0,0,.75)",
                color: "#fff",
                boxShadow: "0px 2px 8px 0px rgba(0,0,0,0.15)"
              }}
              g2-tooltip-value={{
                float: "none",
                marginLeft: "16px"
              }}
            />
          )}

          <Legend position="top-right" marker="circle" />
          <Geom
            type="line"
            position="x*value"
            size={borderWidth}
            color="key"
            // tooltip={[
            //   "key*value*x",
            //   (key, value, x) => ({
            //     title: `${x}`,
            //     name: `${key}：`,
            //     value
            //   })
            // ]}
          />
          <Geom
            type="point"
            position="x*value"
            size={4}
            shape={"circle"}
            color="key"
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </Fragment>
    );
  }
}
